import React, { useState, useContext } from 'react'
import context from './context'

export default function UseContextDemo () {
  const [money, setMoney] = useState(1000000000)

  const callback = value => {
    console.log('---value---', value)
  }

  return (
    <div>
      UseContextDemo
      <hr />
      <context.Provider value={{ money, callback }}>
        <Son />
      </context.Provider>
    </div>
  )
}

function Son () {
  return (
    <div>
      Son
      <hr />
      <GrandSon />
    </div>
  )
}

function GrandSon () {
  const obj = useContext(context)
  return (
    <div>
      GrandSon---{obj.money}
      <p>
        <button onClick={() => obj.callback('张文清')}>change</button>
      </p>
    </div>
  )
}
